<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染v-for</title>
</head>
<body>
    <div id="example-1">
        <!--in-->
        <ul>
            <li v-for="item in items">
                {{$index}}-{{message}}-{{item.text}}
            </li>
        </ul>
        <!--of-->
        <ul>
            <li v-for="item of items">
                {{$index}}-{{message}}-{{item.text}}
            </li>
        </ul>
    </div>

<script src="../lib/vue.js"></script>
<script>
    /*
    * v-for 块内，我们能够完全访问父组件作用域内的属性，
    * 另一个特殊变量$index,它是当前数组元素的索引
    * */
    var data = {
        message : "every one",
        items : [
            {text : "hello vue.js"},
            {text : "hello angular.js"},
            {text : "hello react.js"},
            {text : "hello backBone.js"},
            {text : "hello javascript"}
        ]
    }

    var exampleVm = new Vue({
        el : "#example-1",
        data : data
    })
</script>
</body>
</html>